import { RegularExpression } from '@/common/constVariable';
import MyIcon from '@/components/MyIcon';
import { TagSelectNew } from '@/components/TagSelectNew';
import { Col, DatePicker, Form, Input, Row, Select, Tooltip } from 'antd';
import updateStyles from '../common/styles.less';
import { getLoadMapList, getTenantID } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { useRequest } from 'umi';
import { adminAreadDataGet } from '@/services/BaseLayout';
import { useState } from 'react';
import AdminAriea from '@/components/AdminAriea';
import { ContacterAPI } from '../common/type';
import moment from 'moment';
const TodayDate: any = DatePicker;

export const UpdateModalForm: React.FC<ContacterAPI.IUpdateModalForm> = ({ getContacterInfo, selectSupplierInfo }) => {
  /**  获取数据字典 */
  const { loadMapInfo, mapLoading } = getLoadMapList([
    `${getTenantID()}${ILoadMapTypeAll.NATION_TYPE}`,
    `${getTenantID()}${ILoadMapTypeAll.POLITICAL_OUTLOOK}`,
    `${getTenantID()}${ILoadMapTypeAll.EDUCATION_LEVEL}`,
    `${getTenantID()}${ILoadMapTypeAll.EXPERTS_CARD_TYPE}`, //证件类型
  ]);

  /**获取省市区数据 */
  const areaList = useRequest(() => {
    return adminAreadDataGet({});
  });

  /** 是否展开 */
  const [isOpenMore, setIsOpenMore] = useState<boolean>(false);

  return (
    <>
      <Row>
        <Col span={12}>
          <Form.Item
            label="姓名"
            name="fullName"
            rules={[
              {
                required: true,
                message: '请输入联系人姓名',
              },
            ]}
          >
            <Input placeholder="请输入联系人姓名" allowClear />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={'手机号码'}
            name="phoneMobile"
            rules={[
              {
                required: true,
                message: '请输入手机号码',
              },
              {
                pattern: RegularExpression?.phone,
                message: '手机号码格式错误！',
              },
            ]}
          >
            <Input placeholder="请输入手机号码" allowClear />
          </Form.Item>
        </Col>
        <TagSelectNew
          formLabel="性别"
          formName="sex"
          colSpan={12}
          formRequired={true}
          defalultKeys={getContacterInfo?.sex}
          radioList={[
            {
              value: 0,
              name: (
                <span>
                  <MyIcon type="icon-sex" />
                  &nbsp;未知
                </span>
              ),
            },
            {
              value: 1,
              name: (
                <span>
                  <MyIcon type="icon-man" />
                  &nbsp;男
                </span>
              ),
            },
            {
              value: 2,
              name: (
                <span>
                  <MyIcon type="icon-woman" />
                  &nbsp;女
                </span>
              ),
            },
          ]}
        />
        <TagSelectNew
          formLabel="是否首要"
          formName="isFirst"
          colSpan={12}
          formRequired={true}
          defalultKeys={getContacterInfo?.isFirst}
          radioList={[
            {
              value: 1,
              name: '是',
            },
            {
              value: 0,
              name: '否',
            },
          ]}
        />
        <Col span={12}>
          <Form.Item
            label={'办公电话'}
            name="phoneOffice"
            rules={[
              {
                pattern: RegularExpression?.workPhone,
                message: '办公电话格式错误！',
              },
            ]}
          >
            <Input placeholder="请输入办公电话" allowClear />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={'备用手机'}
            name="phoneSpare"
            rules={[
              {
                pattern: RegularExpression?.phone,
                message: '备用手机格式错误！',
              },
            ]}
          >
            <Input placeholder="请输入备用手机" allowClear />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            label={'邮箱编号'}
            name="emailNum"
            rules={[
              {
                pattern: RegularExpression?.email,
                message: '邮箱编号格式不正确',
              },
            ]}
          >
            <Input placeholder="请输入邮箱编号" allowClear />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item label={'所在公司'} name="companyName" initialValue={selectSupplierInfo?.fullName}>
            <Input placeholder="请输入所在公司" allowClear disabled value={selectSupplierInfo?.fullName} />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item label={'所在部门'} name="deptName">
            <Input placeholder="请输入所在部门" allowClear />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label={'当前职务'} name="positionName">
            <Input placeholder="请输入当前职务" allowClear />
          </Form.Item>
        </Col>
        <AdminAriea
          cascaderData={areaList?.data?.obj}
          colSpan={12}
          isRequired={false}
          labelName="所在区域"
          formName="contaNode"
          allDataID={[]}
          areaAll={() => {}} // 这个是用户选择数据后，会返回的数据 function
          showSearch={true}
          fieldNames={{ label: 'text', value: 'id' }}
          allowClear={true}
        />
        <Col span={12}>
          <Form.Item label="住址" name="addressInfo">
            <Input.TextArea placeholder={`请输入住址`} showCount maxLength={200} autoSize={{ minRows: 1, maxRows: 1 }} />
          </Form.Item>
        </Col>
        <Col
          span={24}
          style={{
            margin: '10px 0px 10px 1.5rem',
            display: !isOpenMore ? 'flex' : 'none',
            justifyContent: 'center',
          }}
        >
          <Tooltip title="更多">
            <a
              onClick={() => {
                setIsOpenMore(true);
              }}
              className={updateStyles['arrowStyles']}
            >
              <MyIcon style={{ fontSize: 18 }} type="icon-shangxiashouqi" />
            </a>
          </Tooltip>
        </Col>
      </Row>

      <Row style={{ display: isOpenMore ? 'flex' : 'none' }}>
        <Col span={12}>
          <Form.Item label="证件类型" name="cardType">
            <Select placeholder="请选择证件类型">
              {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.EXPERTS_CARD_TYPE}`]?.map((item: any) => {
                return (
                  <Select.Option key={item?.id} value={item?.id}>
                    {item?.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={'证件号码'}
            name="cardNum"
            rules={[
              {
                pattern: /^[a-zA-Z0-9_]{0,}$/,
                message: '只能输入英文和数字！',
              },
            ]}
          >
            <Input placeholder="请输入证件号码" allowClear />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item
            label={'QQ号码'}
            name="qqNum"
            rules={[
              {
                pattern: RegularExpression?.qq,
                message: 'QQ号码格式不正确',
              },
            ]}
          >
            <Input placeholder="请输入QQ号码" allowClear />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            label={'微信号码'}
            name="wechatNum"
            rules={[
              {
                pattern: RegularExpression?.weChat,
                message: '微信号码格式不正确',
              },
            ]}
          >
            <Input placeholder="请输入微信号码" allowClear />
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item label="最高学历" name="educateLevel">
            <Select placeholder="请选择最高学历" allowClear loading={mapLoading}>
              {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.EDUCATION_LEVEL}`]?.map((item: any) => {
                return (
                  <Select.Option key={item?.id} value={item?.id}>
                    {item?.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item label="民族" name="nationType">
            <Select placeholder="请选择民族" allowClear loading={mapLoading}>
              {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.NATION_TYPE}`]?.map((item: any) => {
                return (
                  <Select.Option key={item?.id} value={item?.id}>
                    {item?.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="政治面貌" name="politicalType">
            <Select placeholder="请选择政治面貌" allowClear loading={mapLoading}>
              {loadMapInfo?.[`${getTenantID()}${ILoadMapTypeAll.POLITICAL_OUTLOOK}`]?.map((item: any) => {
                return (
                  <Select.Option key={item?.id} value={item?.id}>
                    {item?.name}
                  </Select.Option>
                );
              })}
            </Select>
          </Form.Item>
        </Col>

        <Col span={12}>
          <Form.Item label="出生日期" name="birthday">
            <TodayDate
              placeholder="请选择出生日期"
              format="YYYY-MM-DD"
              style={{ width: '100%' }}
              allowClear
              disabledDate={(current: any) => {
                return current && current > moment();
              }}
            />
          </Form.Item>
        </Col>

        <Col span={24}>
          <Form.Item label={'个人简介'} name="profileInfo">
            <Input.TextArea
              placeholder="请输入个人简介"
              allowClear
              showCount
              maxLength={200}
              autoSize={{ minRows: 2, maxRows: 4 }}
            />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item label={'兴趣爱好'} name="hobby">
            <Input.TextArea
              placeholder="请输入兴趣爱好"
              allowClear
              showCount
              maxLength={200}
              autoSize={{ minRows: 2, maxRows: 3 }}
            />
          </Form.Item>
        </Col>
        <Col span={24}>
          <Form.Item label={'备注'} name="remark">
            <Input placeholder="请输入备注" allowClear />
          </Form.Item>
        </Col>
        <Col
          span={24}
          style={{
            margin: '10px 0px 10px 1.5rem',
            textAlign: 'center',
          }}
        >
          <Tooltip title="收起">
            <a
              onClick={() => {
                setIsOpenMore(false);
              }}
              className={updateStyles['arrowStyles']}
            >
              <MyIcon style={{ fontSize: 18 }} type="icon-shangxiazhankai" />
            </a>
          </Tooltip>
        </Col>
      </Row>
    </>
  );
};
